<template>
  <div class="baogao">
    <el-table border :data="data" style="width: 100%" :height="height" :fit="true" scrollbar-always-on
      @row-click="handleRowClick">
      <el-table-column prop="address" label="事故地址" show-overflow-tooltip v-show="false" />
      <!-- <el-table-column prop="sgbhList" label="事故编号" show-overflow-tooltip /> -->
      <el-table-column prop="reportContent" label="报告内容" :height="500" show-overflow-tooltip />
      <el-table-column prop="reportDate" label="报告日期" show-overflow-tooltip />
      <!-- <el-table-column prop="reportId" label="报告编号" show-overflow-tooltip/> -->
      <el-table-column prop="reportSuggestion" label="处理建议" show-overflow-tooltip />
      <!-- <el-table-column
        prop="startTime"
        label="开始时间"
        show-overflow-tooltip
      /> -->
      <!-- <el-table-column prop="endTime" label="结束时间" show-overflow-tooltip /> -->
      <el-table-column prop="policeNum" label="警号" show-overflow-tooltip />
      <el-table-column prop="userDept" label="所属部门" show-overflow-tooltip />
      <el-table-column prop="userName" label="警员" show-overflow-tooltip />
      <!-- <el-table-column prop="fileName" label="文件名称" show-overflow-tooltip />
      <el-table-column prop="filePath" label="报告" show-overflow-tooltip /> -->
      <!-- 添加操作列 -->
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="text" @click.stop="handleActionClick(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="事故调查详情" width="50%" :close-on-click-modal="false">
      <div class="detail-container">
        <!-- 基本信息区域 -->
        <div class="basic-info">
          <h3>基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="事故地址">
              <div class="ellipsis">{{ currentDetail.address }}</div>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="事故编号">
              <div class="ellipsis">{{ currentDetail.sgbhList }}</div>
            </el-descriptions-item> -->
            <el-descriptions-item label="报告日期">
              <div class="ellipsis">{{ currentDetail.reportDate }}</div>
            </el-descriptions-item>
            <el-descriptions-item label="调查警员">
              <div class="ellipsis">
                {{ currentDetail.userName }} ({{ currentDetail.policeNum }})
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="所属部门">
              <div class="ellipsis">{{ currentDetail.userDept }}</div>
            </el-descriptions-item>
            <el-descriptions-item label="时间范围">
              <div class="ellipsis">
                {{ currentDetail.startTime }} 至 {{ currentDetail.endTime }}
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 报告内容区域 -->
        <div class="report-content">
          <h3>报告内容</h3>
          <el-input type="textarea" :autosize="{ minRows: 3 }" readonly v-model="currentDetail.reportContent" />
        </div>

        <!-- 处理建议区域 -->
        <div class="suggestion">
          <h3>处理建议</h3>
          <el-input type="textarea" :autosize="{ minRows: 3 }" readonly v-model="currentDetail.reportSuggestion" />
        </div>

        <!-- 图片展示区域 -->
        <div class="image-gallery" v-if="currentDetail.images?.length">
          <h3>现场图片 ({{ currentDetail.images?.length || 0 }})</h3>
          <el-scrollbar>
            <div class="image-list">
              <el-image v-for="(img, index) in currentDetail.images" :key="index" :src="img.url || img.wholeUrl"
                :preview-src-list="previewImages" :initial-index="index" fit="cover" class="image-item"
                :title="img.name || `图片${index + 1}`">
                <template #error>
                  <div class="image-error">
                    <el-icon>
                      <Picture />
                    </el-icon>
                    <span>加载失败</span>
                  </div>
                </template>
              </el-image>
            </div>
          </el-scrollbar>
        </div>

        <!-- 文件下载 -->
        <!-- <div class="file-download" v-if="currentDetail.filePath">
          <h3>调查报告</h3>
          <el-button
            type="primary"
            @click="
              downloadFile(currentDetail.filePath, currentDetail.fileName)
            "
          >
            <el-icon><Download /></el-icon>
            下载报告文档
          </el-button>
        </div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { GetHistoricalInvestigationRecordsList } from "@/service/api/report-analysis";

defineProps({
  data: {
    type: Array,
  },
  height: {
    type: Number,
    default: 500,
  },
});
const handleRowClick = (event: Event) => {
  // 阻止事件冒泡
  event.stopPropagation();
};

// 操作按钮点击事件
const handleActionClick = async (row: any) => {
  try {
    // 加载详细数据
    if (row.reportId) {
      const res = await GetHistoricalInvestigationRecordsList(row.reportId);
      currentDetail.value = res;
    } else {
      currentDetail.value = row;
    }

    detailDialogVisible.value = true;
  } catch (error) {
    // ElMessage.error("获取详情失败");
    console.error(error);
  }
  // 阻止事件冒泡
  event?.stopPropagation();
};
// 详情弹窗控制
const detailDialogVisible = ref(false);
const currentDetail = ref<any>({});

// 计算预览图片列表
const previewImages = computed(() => {
  return (
    currentDetail.value.images?.map((img: any) => img.url || img.wholeUrl) || []
  );
});
</script>

<style lang="less" scoped>
.detail-container {
  padding: 20px;
  height: 600px;
  overflow-x: auto;

  h3 {
    margin: 20px 0 10px;
    color: #409eff;
  }

  .basic-info {
    margin-bottom: 20px;
  }

  .report-content,
  .suggestion {
    margin-bottom: 20px;
  }

  .image-gallery {
    margin-bottom: 20px;

    .image-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;

      .image-item {
        width: 150px;
        height: 150px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;

        &:hover {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .image-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;

    .el-icon {
      font-size: 40px;
      margin-bottom: 5px;
    }
  }

  .file-download {
    margin-top: 20px;
    text-align: center;
  }
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

:deep(.el-table__body-wrapper .el-table__row .el-table__cell) {
  border: 1px solid rgba(5, 62, 69, 0.9) !important;
}

:deep(.detail-container) {
  .el-textarea__inner{
    background-color: transparent !important;
    color: #fff;
  }

  .el-descriptions__body {
    max-height: 330px;
    overflow-y: scroll;
    background-color: transparent !important;

    &&::-webkit-scrollbar {
      width: 0;
    }

    .el-descriptions__table.is-bordered .el-descriptions__cell {
      background: transparent !important;
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.7) !important;
      min-width: 100px;
      text-align: center;
    }
  }
}
</style>
